<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一张图中间部分</title>



    <script src="js/jquery.min.js"></script>
    <script src="js/three.module.js"></script>
    <script src="js/stats.min.js"></script>
</head>
<body>
<div>
    <h1 style="display: none; color: #FFFFFF; z-index:10; position: absolute;  left: 0; top: 0; right: 0;   margin:auto; text-align: center;">.netCoreAdmin</h1>
</div >

<div style="position: absolute;" id="div_menu">
    <table>
        <tr>
            <td>&nbsp;<button type="button"  data-type="warning"   onclick="showWarningList(this)" class="layui-btn layui-btn-danger layui-btn-radius layui-btn-sm">今日报警</button></td>
            <td>&nbsp;<button type="button"  data-type="warning"   onclick="showJinRiDaiBan(this)" class="layui-btn layui-btn-warm layui-btn-radius layui-btn-sm">今日代办</button></td>
            <td>&nbsp;<button type="button" data-type="all"       onclick="showAllLocation(this)" id="btn_all_address"  class="layui-btn layui-btn-radius layui-btn-sm">设备管理</button></td>
            <td>&nbsp;<button type="button"  data-type="href"      onclick="showReportList(this)" style="background-color: #0088bb;" class="layui-btn layui-btn-radius layui-btn-sm">报表数据</button></td>
            <td>&nbsp;<button type="button"  data-type="href"      onclick="showTargetDataServer(this)" class="layui-btn layui-btn-normal layui-btn-radius layui-btn-sm">数据管理</button></td>
            <!--				 <td> <button type="button"  data-type="showWangGe" onclick="showMapWanGeInfo(this)" class="layui-btn   layui-btn-radius layui-btn-sm">显示网格</button></td>-->
            <!--				 <td> <button type="button"  data-type="showEdit" onclick="showEditMapInfo(this)" class="layui-btn   layui-btn-radius layui-btn-sm">编辑模式</button></td>-->
        </tr>
    </table>
</div>
<div id="container" style="width:600px;height: 600px;">
    <!--鼠标点击或者移入显示的内容-->
    <div style="display: none; position: absolute; z-index: 10;float: left; margin-left: 100px; border: 1px solid red;" id="divShowInfo">
        <table class="hovertable" id="gasTable">
            <!--			<tr>-->
            <!--				<td colspan="0">传感器数据</td>-->
            <!--			</tr>-->
            <tr>

                <td colspan="3" id="table_data_location"></td>
                <td style="display: none" id="table_data_pid"></td>
            </tr>
            <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                <td >甲烷</td><td id="table_data_CH4">0.00</td><td>%</td>
            </tr>
            <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                <td >二氧化碳</td><td id="table_data_CO2">0.00</td><td>%</td>
            </tr>
            <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                <td>一氧化碳</td><td id="table_data_CO">0</td><td >ppm</td>
            </tr>
            <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                <td>温度</td><td  id="table_data_T">0.0</td><td>℃</td>
            </tr>
            <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                <td>湿度</td><td  id="table_data_H">0.0</td><td>RH</td>
            </tr>
            <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                <td>烟感</td><td id="table_data_YANGAN">正常</td><td ></td>
            </tr>
            <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                <td>氧气</td><td id="table_data_O2">20.9</td><td >%</td>
            </tr>
            <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                <td><span onclick="ShowDetailsInfo()" style="cursor: pointer; color:#FF5722; text-decoration:underline;"> 查看详细</span></td>
                <td>&nbsp;</td>
                <td>
                    <span onclick="closeShowInfo()" style="cursor: pointer; color:#FF5722; text-decoration:underline;"> 关闭</span>
                </td>
            </tr>
        </table>
    </div>
</div>

</body>
<script src="js/three.js"></script>
<script src="js/three.min.js"></script>
<script src="js/three.module.js"></script>
<script type="text/javascript">
    let container, stats;
    let camera, controls, scene, renderer;
    let textureLoader;
    $(function () {
       initGraphics();
    });

    function init(){
        initGraphics();
        renderer.render( scene, camera );
    }
      function initGraphics() {
        container = document.getElementById( 'container' );
        //场景加个摄像机
        var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
        // camera attributes
        var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
        // set up camera
        camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); //THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );

        //projector = new THREE.Projector();
        // //camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
        scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xbfd1e5 ); //0xbfd1e5  0x333 背景色
        // scene.background = new THREE.Color( 0xe0e2e9 );

        //显示坐标轴
        var axes = new THREE.AxesHelper( 200 ) //new THREE.AxisHelper( 200 );
        //axes.position.x=-1000;
        //axes.position.z=-1000; 三维轴会到左上角

        scene.add( axes );

//底图网格 (总长宽，分多少个网格，颜色，轴线颜色，和网格颜色 #e6e8ed)
        //var gridHelper = new THREE.GridHelper(2000, 100, 0x888888, 0x888888 );
        var gridHelper = new THREE.GridHelper(1000, 20, 0xe6e8ed, 0xe6e8ed ); //0xe6e8ed,0xe6e8ed
        //gridHelper.position.x = 1000;
        //gridHelper.position.z = 1000;
        scene.add( gridHelper );
        gridHelper.material.visible=true;

        //camera.position.set( - 7, 5, 8 );
        camera.position.set( 0, 1000, 1500 );


        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.shadowMap.enabled = true;
        renderer.setClearColor( '#FFFFFF' );//设置场景的颜色 背景色
        container.appendChild( renderer.domElement );

        //场景缩放
        // controls = new OrbitControls( camera, renderer.domElement );
        // controls.target.set( 0, 2, 0 );
        // controls.update();
        //可以限制不看y 轴负数
       // --const controls = new OrbitControls( camera, renderer.domElement );
       // --controls.maxPolarAngle = Math.PI * 0.5;
       // --controls.minDistance = 5;
       // --controls.maxDistance = 5000;


        //您可以在多远的垂直轨道，上限和下限。
        //范围是0到Math.PI弧度。
        //controls.minPolarAngle = 1; // radians
        //controls.maxPolarAngle = Math.PI; //弧度

        //水平绕上，下限和下限运行多远。
        //如果设置，则必须是区间[ -  Math.PI，Math.PI]的子区间。
        // controls.minAzimuthAngle =  -  Infinity; // radians
        // controls.maxAzimuthAngle = Infinity; //弧度

        textureLoader = new THREE.TextureLoader();

        //环境光
        const ambientLight = new THREE.AmbientLight( 0x404040 ); //0x404040
        scene.add( ambientLight );

        const light = new THREE.DirectionalLight( 0xffffff, 1 );
        light.position.set( - 10, 10, 5 );
        light.castShadow = true;
        const d = 20;
        light.shadow.camera.left = - d;
        light.shadow.camera.right = d;
        light.shadow.camera.top = d;
        light.shadow.camera.bottom = - d;

        light.shadow.camera.near = 2;
        light.shadow.camera.far = 50;

        light.shadow.mapSize.x = 1024;
        light.shadow.mapSize.y = 1024;

        scene.add(light);

        //显示FPS
        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '-50px';
        container.appendChild( stats.domElement );
        renderer.render( scene, camera );
    }

    // function render() {
    //     const deltaTime = clock.getDelta();
    //
    //     //pdatePhysics( deltaTime );
    //
    //     //processClick();
    //
    //     document.addEventListener( 'pointerdown', onDocumentMouseDown, false );
    //
    //     document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    //
    //     renderer.render( scene, camera );
    // }
    // function animate() {
    //     requestAnimationFrame( animate );
    //     renderer.render(scene, camera );
    // }
    // animate();
</script>
</html>
